<template>
  <div>
    <!-- <h1 :class="{ active: isActive, red: isRed }" @click="handle">
      动态绑定class（对象语法）
    </h1>
    <h1 :class="getClass()" @click="handle">动态绑定class（对象语法--函数形式）</h1>
    <h1 :class="myClass" @click="handle">动态绑定class（对象语法--计算属性）</h1> -->
    <!-- <h1 :class="[isActive, isRed]">动态绑定class（数组语法--单纯数组绑定）</h1>
    <h1 :class="[index == 1 ? 'active' : 'red']">
      动态绑定class（数组语法--单纯数组绑定）
    </h1> -->
    <h1 :style="{ fontSize: '18px', color: color }">
      动态绑定style（对象语法）
    </h1>
    <h1 :style="[baseStyle, baseStyle2]">动态绑定style（数组语法）</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // isActive: true,
      // isRed: true,
      isActive: "active",
      isRed: "red",
      index: 1,
      color: "red",
      baseStyle: { fontSize: "20px" },
      baseStyle2: { color: "pink" },
    };
  },
  computed: {
    myClass: function () {
      return { active: this.isActive, red: this.isRed };
    },
  },
  methods: {
    getClass() {
      return { active: this.isActive, red: this.isRed };
    },
    handle() {
      this.isActive = !this.isActive;
    },
  },
};
</script>

<style lang="css" scoped>
.active {
  background: pink;
}
.red {
  color: red;
  margin-bottom: 10px;
}
</style>